'use client'

import { useState, useEffect } from 'react'
import { SceneFilter, SceneTag } from '@/types/scene'
import { format } from 'date-fns'

interface SceneSearchProps {
  onFilterChange: (filter: SceneFilter) => void
  tags: SceneTag[]
}

export default function SceneSearch({ onFilterChange, tags }: SceneSearchProps) {
  const [filter, setFilter] = useState<SceneFilter>({
    search: '',
    tags: [],
    status: 'all',
    dateRange: {}
  })

  useEffect(() => {
    onFilterChange(filter)
  }, [filter, onFilterChange])

  return (
    <div className="space-y-4 bg-background-paper/30 backdrop-blur-lg border border-white/10 rounded-lg p-4">
      <div className="flex items-center space-x-4">
        <input
          type="text"
          placeholder="搜索场景名称..."
          value={filter.search}
          onChange={(e) => setFilter(prev => ({ ...prev, search: e.target.value }))}
          className="flex-1 px-4 py-2 bg-white/5 border border-white/10 rounded-lg
                   text-white/90 placeholder-white/40
                   focus:outline-none focus:ring-2 focus:ring-primary-500/50"
        />
        <select
          value={filter.status}
          onChange={(e) => setFilter(prev => ({ 
            ...prev, 
            status: e.target.value as SceneFilter['status']
          }))}
          className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg
                   text-white/90
                   focus:outline-none focus:ring-2 focus:ring-primary-500/50"
        >
          <option value="all">全部状态</option>
          <option value="active">已启用</option>
          <option value="inactive">已禁用</option>
        </select>
      </div>

      <div className="flex flex-wrap gap-2">
        {tags.map(tag => (
          <label
            key={tag.id}
            className="flex items-center space-x-2 px-3 py-1.5 rounded-full
                     transition-colors cursor-pointer"
            style={{ 
              backgroundColor: `${tag.color}15`,
              borderColor: `${tag.color}30`,
              borderWidth: '1px'
            }}
          >
            <input
              type="checkbox"
              checked={filter.tags.includes(tag.id)}
              onChange={(e) => {
                setFilter(prev => ({
                  ...prev,
                  tags: e.target.checked
                    ? [...prev.tags, tag.id]
                    : prev.tags.filter(id => id !== tag.id)
                }))
              }}
              className="rounded border-white/20 bg-white/5 checked:bg-primary-500 
                       checked:border-0 transition-colors"
            />
            <span className="text-sm" style={{ color: tag.color }}>
              {tag.name}
            </span>
          </label>
        ))}
      </div>

      <div className="flex items-center space-x-4">
        <input
          type="date"
          value={filter.dateRange.start ? format(filter.dateRange.start, 'yyyy-MM-dd') : ''}
          onChange={(e) => setFilter(prev => ({
            ...prev,
            dateRange: {
              ...prev.dateRange,
              start: e.target.value ? new Date(e.target.value) : undefined
            }
          }))}
          className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg
                   text-white/90
                   focus:outline-none focus:ring-2 focus:ring-primary-500/50"
        />
        <span className="text-white/60">至</span>
        <input
          type="date"
          value={filter.dateRange.end ? format(filter.dateRange.end, 'yyyy-MM-dd') : ''}
          onChange={(e) => setFilter(prev => ({
            ...prev,
            dateRange: {
              ...prev.dateRange,
              end: e.target.value ? new Date(e.target.value) : undefined
            }
          }))}
          className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg
                   text-white/90
                   focus:outline-none focus:ring-2 focus:ring-primary-500/50"
        />
      </div>
    </div>
  )
} 